<template>
  <div>
    <!-- <el-input v-model="Noticeform.content" autocomplete="off"></el-input> -->
    <quillEditor
      class="ql-toolbar"
      :class="[readOnly ? 'hide-toolbar' : '']"
      v-model="Noticeform.content"
      :options="editorOption"
      ref="quillEditor"
      @blur="handleBlur"
      :disabled="readOnly"
    >
    </quillEditor>
  </div>
</template>
<script>
/* eslint-disable indent */
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

const titleConfig = {
  "ql-bold": "加粗",
  "ql-color": "颜色",
  "ql-font": "字体",
  "ql-code": "插入代码",
  "ql-italic": "斜体",
  "ql-link": "添加链接",
  "ql-background": "背景颜色",
  "ql-size": "字体大小",
  "ql-strike": "删除线",
  "ql-script": "上标/下标",
  "ql-underline": "下划线",
  "ql-blockquote": "引用",
  "ql-header": "标题",
  "ql-indent": "缩进",
  "ql-list": "列表",
  "ql-align": "文本对齐",
  "ql-direction": "文本方向",
  "ql-code-block": "代码块",
  "ql-formula": "公式",
  "ql-image": "图片",
  "ql-clean": "清除字体样式",
};
function addQuillTitle() {
  const oToolBar = document.querySelector(".ql-toolbar");
  const aButton = oToolBar.querySelectorAll("button");
  const aSelect = oToolBar.querySelectorAll("select");
  aButton.forEach((item) => {
    if (item.className === "ql-script") {
      item.value === "sub" ? (item.title = "下标") : (item.title = "上标");
    } else if (item.className === "ql-indent") {
      item.value === "+1"
        ? (item.title = "向右缩进")
        : (item.title = "向左缩进");
    } else {
      item.title = titleConfig[item.classList[0]];
    }
  });
  aSelect.forEach((item) => {
    item.parentNode.title = titleConfig[item.classList[0]];
  });
  // 关闭单词检测提示
  document.querySelector(".ql-editor").setAttribute("spellcheck", false);
  return oToolBar;
}

export default {
  props: {
    readOnly: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: "",
    },
    value: {
      type: String,
      defualt: "",
    },
    validateEvent: {
      type: Boolean,
      default: true,
    },
    noticeId: {
      type: String,
      default: "",
    },
  },
  components: {
    quillEditor,
  },
  data() {
    return {
      formLabelWidth: "110px",
      content: "",
      Noticeform: {
        id: "",
        readOrNot: 0,
        flag: "0",
        title: "",
        content: "",
      },
    };
  },
  computed: {
    editorOption() {
      const editorOption = {
        placeholder: this.placeholder,
      };
      editorOption.modules = !this.readOnly
        ? {
            toolbar: [
              "bold",
              "underline",
              "strike",
              "blockquote",
              "code-block",
              "italic",
              { color: [] },
              { background: [] },
              { list: "ordered" },
              { list: "bullet" },
              { script: "sub" },
              { script: "super" },
              { indent: "-1" },
              { indent: "+1" },
              "link",
              "image",
              "clean",
            ],
          }
        : {
            toolbar: [],
          };
      return editorOption;
    },
    quill() {
      return this.$refs.quillEditor.quill;
    },
  },
  watch: {
    value(v) {
      this.content = v;
      if (this.validateEvent) {
        this.dispatch("ElFormItem", "el.form.change", [v]);
      }
    },
    readOnly(v) {
      console.log(v, "9--9-");
      this.quill.enable(!v);
      this.initQuillEvent();
    },
  },
  mounted() {
    addQuillTitle();
    console.log(this.readOnly, "我变不变");
    this.content = this.value;
    this.showNotice();
  },
  methods: {
    showNotice() {
      console.log(this.noticeId, "----");
      if (!this.noticeId) {
        this.Noticeform = {
          id: "",
          readOrNot: 0,
          flag: "0",
          title: "",
          content: "",
        };
        // console.log(JSON.parse(localStorage.notice).slice(-1), "+++");
        // this.Noticeform = localStorage.notice
        //   ? JSON.parse(localStorage.notice).slice(-1)[0]
        //   : {};
      } else {
        console.log(localStorage.notice, "----");
        this.Noticeform = localStorage.notice
          ? JSON.parse(localStorage.notice).filter(
              (v) => v.id == this.noticeId
            )[0]
          : {};
      }
    },
    save(val) {
      let arr = localStorage.notice ? JSON.parse(localStorage.notice) : [];
      this.Noticeform.flag = val;
      arr.push(this.Noticeform);
      localStorage.notice = JSON.stringify(arr);
      console.log(this.Noticeform, "+++++++++++");
    },
    read(val) {
      let arr = localStorage.notice ? JSON.parse(localStorage.notice) : [];
      arr.forEach((v) => {
        if (v.id == this.Noticeform.id) {
          v.readOrNot = val;
        }
      });
      localStorage.notice = JSON.stringify(arr);
      this.$emit("visibledialog", false);
    },
    handleBlur() {
      if (this.validateEvent) {
        this.dispatch("ElFormItem", "el.form.blur", [this.value]);
      }
    },
    // 广播事件
    dispatch(componentName, eventName, params) {
      let parent = this.$parent || this.$root;
      let name = parent.$options.componentName;

      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;

        if (parent) {
          name = parent.$options.componentName;
        }
      }
      console.log(parent);
      if (parent) {
        parent.$emit(...[eventName].concat(params));
      }
    },
    initQuillEvent() {
      this.quill.enable(!this.readOnly);
      this.quill.on("text-change", (delta, oldDelta, source) => {
        if (source === "api") {
          // console.log('An API call triggered this change.', delta);
        } else if (source === "user") {
          // console.log('A user action triggered this change.', delta);
        }
        this.$emit("input", this.content);
      });
    },
  },
};
</script>
<style lang="less">
.ql-container {
  height: calc(~"100% - 40px");
  // height: 100%;
}
.hide-toolbar {
  .ql-toolbar {
    height: 0;
    padding: 0 !important;
    border-top-color: transparent !important;
    border: none !important;
  }

  .ql-container.ql-snow {
    border: none;
  }
  .ql-editor {
    background-color: #ffffff;
  }
}
p > img {
  width: 300px;
}
</style>


